<template>
	<view class="container">
		<view class="wrap">
			<view class="pfxc-div">
				<view class="dtjf-div">
					<view class="dtjf-list" v-for="(item,index) in paiHangData" :key="index" v-if="index<30">
						<view class="head-img">
							<image :src="$public.imgageUrl(item.headImg)" mode="scaleToFill" class="image"></image>
							<view class="nick-name">
								{{item.nickName}}
							</view>
						</view>

						<view class="jifen">
							<text class="redtext">{{item.useScore}}</text> 积分
						</view>
						<view class="user-lv">
							普法{{$public.jfLevelName($public.jfLevel(item.useScore))}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paiHangData: []
			};
		},
		onLoad() {

		},
		onShow() {
			this.getPaiHang()
		},
		methods: {
			getPaiHang() {
				let that = this
				this.$public.htmlPost("/api/getUserDaTiJiFen").then((res) => {
					console.log("getUserDaTiJiFen res", res)
					let data = res.data;
					if (data.code == 0) {
						that.paiHangData = data.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.pfxc-div {
		// height: 704rpx;
		background: #fff;
		background-size: 100% auto;
		border-radius: 16rpx;
		padding: 30rpx 48rpx;
		margin-top: 30rpx;

	}

	.dtjf-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 30rpx;

		.head-img {
			width: 230rpx;
			display: flex;
			align-items: center;

			.image {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
		}

		.nick-name {
			width: 160rpx;
			// height: 56rpx;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			/* 指定要显示的最大行数 */
			// white-space: nowrap;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;


			// line-height: ;
		}

		.jifen {
			width: 160rpx;
			height: 56rpx;
			color: #999999;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			line-height: 56rpx;

			.redtext {
				color: #DF686A;
				padding-right: 10rpx;
			}
		}

		.user-lv {
			text-align: right;
			height: 56rpx;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			line-height: 56rpx;
		}
	}
</style>